<template>
  <div class="buywrap">
    <van-nav-bar title="确认订单" left-arrow @click-left="onClickLeft" />
    <div class="idinfo">
      <p>收货人：</p>
      <p>收获地址：</p>
      <span class="iconfont icon-xiangyou"></span>
      <!-- <van-contact-card :type="cardType" :name="currentContact.name" :tel="currentContact.tel" /> -->
    </div>

    <li>
      <p>发票信息</p>
      <p>不需要</p>
      <span class="iconfont icon-xiangyou"></span>
    </li>
    <ul>
      <li v-for="(item,index) in mainlist" :key="index">
        <p class="title">{{item.title}}</p>
        <p class="price-wrap">
          <span class="other">{{item.other}}</span>
          <span class="price">{{item.price}}</span>
        </p>
        <span class="iconfont icon-xiangyou" v-if="index!==0"></span>
      </li>
    </ul>
    <div class="mainlist">
      <header>
        <img :src="icon" alt /> 电商仓
      </header>
      <ul>
        <van-card
          v-for="(item,index) in shopArr"
          :key="index"
          :num="item.num"
          :price="item.price"
          :desc="'颜色'+item.color"
          :title="item.title"
          :thumb="img"
        />
      </ul>
      <footer>
        <div class="totalnum">
          共
          <span>{{totalnum}}</span>
          件商品
        </div>
        <p>
          合计:
          <span>￥{{totalPrice/100}}</span>
        </p>
      </footer>
    </div>
    <van-submit-bar
      button-text="立即支付"
      :price="totalPrice"
      :decimal-length="pointnum"
      safe-area-inset-bottom
    ></van-submit-bar>
  </div>
</template>
<script>
import icon from "@/assets/image/shop.png";
import img from "@/assets/image/cart-onshop.png";
export default {
  data() {
    return {
      img: img,
      icon: icon,

      mainlist: [
        {
          title: "商品合计",
          price: "￥99",
        },
        {
          title: "使用优惠券",
          price: "-￥0",
          other: "1张",
        },
        {
          title: "积分抵扣",
          price: "-￥0",
          other: "0积分",
        },
        {
          title: "运费",
          price: "+￥10",
        },
      ],
    };
  },
  methods: {
    cardType() {
      return { 收货人: "李四", 地址: "hhh" };
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    cardType() {
      return this.chosenContactId !== null ? "edit" : "add";
    },
  },
  mounted() {
    console.log(this.shopArr);
  },
  computed: {
    shopArr() {
      return JSON.parse(localStorage.getItem("shop"));
    },
    totalPrice() {
      return Number(localStorage.getItem("totalprice"));
    },
    totalnum() {
      return localStorage.getItem("totalnum");
    },

    pointnum() {
      let point = String(this.totalPrice / 100).split(".");
      let pointarr = String(point[1]).split("").slice(0, 2);
      let num = 0;
      if (
        (pointarr[1] == "n" && pointarr[0] == "u") ||
        (pointarr[1] == "0" && pointarr[0] == "0")
      ) {
        num = 0;
      } else if (
        (pointarr[1] == 0 && pointarr[0] !== 0) ||
        pointarr.length === 1
      ) {
        num = 1;
      } else {
        num = 2;
      }
      return num;
    },
  },
  beforeRouteLeave(to, from, next) {
    localStorage.removeItem("totalnum");
    localStorage.removeItem("totalprice");
    localStorage.removeItem("shop");
    next();
  },
};
</script>

<style lang="stylus">
.buywrap {
  // background: #f4f4f4;
  height: 100vh;
  background: #f4f4f4;

  .van-nav-bar {
    position: fixed;
    top: 0;
    width: 100%;
    height: 46px;
  }

  .van-nav-bar .van-icon {
    color: #7F7F7F;
    height: 17px;
    width: 17px;
    font-size: 26px;
  }

  .van-nav-bar__title {
    font-size: 18px;
    color: #494949;
    font-family: PingFang-SC-Medium;
  }

  .idinfo {
    margin-top: 47px;
    margin-bottom: 13px;
    padding: 13px 0 0 46px;
    position: relative;
    background: #fff;
    height: 61px;

    p {
      font-size: 13px;
      color: #6D6D6D;
      font-weight: bold;
      line-height: 20px;
    }
  }

  .icon-xiangyou {
    font-weight: 100;
    position: absolute;
    right: 18px;
    top: 50%;
    font-size: 28px;
    color: #B8B7C3;
    transform: translateY(-50%);
  }

  li {
    height: 43px;
    padding: 0 54px 0 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    position: relative;
    font-size: 14px;
    color: #454545;
    font-weight: bold;
    background: #fff;
  }

  ul {
    margin-bottom: 14px;

    li {
      margin-bottom: 0px;
      padding: 0 42px 0 28px;
      position: relative;

      &::before {
        content: '';
        height: 1px;
        width: 338px;
        background: #f4f4f4;
        display: block;
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 2;
      }

      .price-wrap {
        display: flex;
        align-items: center;
        width: 80px;
        display: flex;
        justify-content: space-between;
      }

      .price {
        color: #C90738;
        font-size: 14px;
      }

      .other {
        width: 48px;
        color: #DEDEDE;
        font-size: 12px;
        margin-left: -10px;
        text-align: right;
      }
    }
  }

  li:nth-child(1) {
    padding: 0 21px 0 28px;
  }

  .mainlist {
    background: #fff;

    header {
      height: 37px;
      line-height: 37px;
      padding: 0 28px;
      color: #4D4D4D;
      font-size: 12px;
      font-weight: bold;
      position: relative;

      &::before {
        content: '';
        height: 2px;
        width: 338px;
        background: #f4f4f4;
        display: block;
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 2;
      }

      img {
        margin-right: 9px;
      }
    }

    footer {
      height: 42px;
      padding-right: 20px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      border-top: 1px solid #f4f4f4;
      margin-bottom: 46px;

      .totalnum {
        color: #A2A1AF;
        font-size: 12px;
        font-weight: bold;
        margin-right: 5px;
        margin-top: 2px;
      }

      p {
        font-size: 14px;

        span {
          font-size: 16px;
          color: #C90738;
          font-weight: bolder;
        }
      }
    }
  }

  .van-card {
    position: relative;

    &::before {
      content: '';
      height: 2px;
      width: 338px;
      background: #f4f4f4;
      display: block;
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      margin: auto;
      z-index: 2;
    }
  }

  .van-card__title {
    font-size: 13px;
    font-weight: bold;
    color: #4E4E4E;
  }

  .van-card__desc {
    margin-top: 9px;
    color: #C7C5CE;
    font-size: 13px;
    font-weight: bold;
  }

  .van-card__price-currency, .van-card__price-integer, .van-card__price-decimal {
    font-size: 15px;
    font-weight: bold;
    color: #C90738;
  }

  .van-nav-bar__arrow {
    margin-top: -5px;
  }

  .van-card__price-currency {
    margin-right: 3px;
  }

  .van-card__num {
    color: #2D2D2D;
    font-weight: bold;
  }

  .van-submit-bar {
    margin-bottom: 0px;
    height: 46px;

    .van-submit-bar__bar {
      height: 100%;
    }

    .van-button--round {
      border-radius: 0;
      margin-right: -16px;
      background: #b10625;
      height: 100%;
    }

    .van-submit-bar__price {
      color: #b10625;
      font-size: 18px;
    }
  }
}
</style>